<template>
	<view v-if="stepList.length > 0" class="stepeed-padding">
		<view class="stepeed" :style="{'--min-height': minHeight}">
			<view class="stepeed-item" :class="{'stepeed-active': index == stepList.length - 1}" v-for="(item,index) in stepList">
				<!-- 顶部文案 -->
				<view class="step-main" :style="{left: topWidth(item,index)}" :class="{'step-main-top': index >= 0}">
					<view class="step-main-text">{{item.name}}</view>
				</view>
				<!-- 中间进度 -->
				<view class="step-head">
					<!-- 图标 -->
					<view class="step-head-icon"></view>
					<!-- 线条 -->
					<view class="step-head-line" :class="{'line-active': index == stepList.length - 1}">
						<!-- 颜色进度填充 -->
						<view class="fill-line-backgroud" :style="{width: item.backWidth}"></view>
					</view>
					<!-- 进度条相差时间 -->
					<view class="step-head-time">{{item.daytime}}</view>
				</view>
				<!-- 底部文案 -->
				<view class="step-main" :style="{left: bottomWidthCode(item,index)}" :class="{'step-bottom-absolute':item.showClose}">
					<view class="step-main-text">{{item.time}}</view>
					<view style="margin-top: -4rpx;" class="step-main-text" v-if="item.yeartime && item.time != '今天'">{{item.yeartime}}</view>
				</view>
			</view>
		</view>
		<view class="stepeed-bottom">
			<view class="left-step step-fize"></view>
			<view class="collection-line"></view>
			<view class="center-step">{{totalDay}}</view>
			<view class="collection-line"></view>
			<view class="right-step step-fize"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {}
		},
		props: {
			// 进度数据
			stepList: {
				type: Array,
				default: () => { return [] }
			},
			// 总的天数
			totalDay: {
				type: String,
				default: ''
			},
			minHeight: {
				type: String,
				default: '20px'
			},
			typeItem: {
				type: String,
				default: ''
			}
		},
		methods: {
			bottomWidthCode (item,index) {
			    if(item.time == '今天') return '-20px'
			    if(index == this.stepList.length - 1) return `-${item.time.length * 6}px`
			    return `-${item.time.length * 3}px`
			},
			topWidth (item,index) {
			    if(index == 0) return ''
				// #ifdef H5
			    else if(index == this.stepList.length - 1) return  `-${item.name.length * 10}px`
				// #endif
				// #ifndef APP-PLUS
				else if(index == this.stepList.length - 1) return  `-${item.name.length * 6}px`
				// #endif
			    else return '-8px'
			},
			// 弹窗偏移量
			offsetTop (index) {
			    if(this.typeItem == '1') {
			        return index <= 0 ?-30:10
			    } else {
			        return index <= 0 ?-10:10
			    }
			},
		}
	}
</script>

<style lang='scss' scoped>
.stepeed-padding {
	padding: 20rpx 0 20rpx 20rpx;
	/* #ifdef H5 */
	font-size: 12px;
	/* #endif */
	/* #ifndef H5 */
	font-size: 12px;
	/* #endif */
}
.stepeed {
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    position: relative;
    .stepeed-position {
        position: absolute;
        top: 42%;
        left: 1px;
        width: 100%;
        height: 8px;
        border: 1px solid #b5001e;
    }
    .stepeed-progress {
        height: 100%;
        background-color: #b5001e;
    }
    .stepeed-item {
        width: 100%;
        position: relative;
    }
    .stepeed-active {
        width: 100px;
    }
    .step-main {
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
		margin-top: 3px;
    }
    .step-bottom-absolute {
        position: absolute;
		margin-top: 3px;
    }
    .step-main-text {
		margin-top: -5rpx;
        overflow: hidden;
        white-space: nowrap;
    }
    .step-main-top {
        position: relative;
		margin-bottom: 25rpx;
		top: 3px;
    }
    .step-main-bottom {

    }
    .step-head {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .step-head-line {
        width: 100%;
        height: 4px;
        border-top: 1rpx solid #b5001e;
        border-bottom: 1rpx solid #b5001e;
    }
    .fill-line-backgroud {
        width: 0%;
        height: 100%;
        background-color: #b5001e;
    }
    .line-active {
       display: none;
    }
    .step-head-icon {
        width: 1px;
        height: 12px;
        background-color: #b5001e;
        transition: .15s ease-out;
    }
    .active-color-etc {
        background-color: black;
    }
    .line-active-color {
        background-color: #b5001e;
    }
    .step-head-time {
        position: absolute;
		/* #ifdef H5 */
        top: -30rpx;
		/* #endif */
		/* #ifndef H5 */
		top: -22rpx;
		/* #endif */
        left: 35%;
    }
}
.stepeed-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #b5001e;
	/* #ifdef H5 */
    width: calc(100% - 24px);
	/* #endif */
	/* #ifndef H5 */
	width: calc(100% - 24px);
	/* #endif */
    white-space: nowrap;
	margin-top: 10rpx;
    .collection-line {
        width: 100%;
        height: 1px;
        background-color: #949494;
        margin: 0 20rpx;
    }
    .step-fize {
        width: 2px;
        height: 10px;
        background-color: #949494;
        position: relative;
    }
    .left-step::after {
        content: '';
        position: absolute;
        height: 4px;
        width: 4px;
        border-left: 1px solid #949494;
        border-bottom: 1px solid #949494;
        transform: rotate(45deg);
        top: 2.9px;
        right: -9px;
    }
    .right-step::after {
        content: '';
        position: absolute;
        height: 4px;
        width: 4px;
        border-right: 1px solid #949494;
        border-bottom: 1px solid #949494;
        transform: rotate(-45deg);
        top: 2.9px;
        left: -9px;
    }
    .center-step {
        color: #333;
        padding: 0 20rpx;
    }
}
.setop-alone {
    display: flex;
    align-items: center;
    .el-progress {
        flex: 1;
        width: 100%;
        margin-left: 40rpx;
    }
}
</style>